<template>
  <div class="info-box">
    <div class="info-title">
      个人信息
    </div>
    <div class="info-body">
      <el-descriptions
          class="margin-top"
          title=""
          :column="1"
          :size="size"
          border
          width="4vw"
      >
        <el-descriptions-item
            label-align="center"
            align="center"
            width="7vw"
            style="height: 5vh"
        >
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <User />
              </el-icon>
              姓名
            </div>
          </template>
          <div class="user-infom">
            {{userInfo.userName}}
          </div>
        </el-descriptions-item>
        <el-descriptions-item
            label-align="center"
            align="center"
            width="7vw"
            style="height: 5vh"
        >
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <User />
              </el-icon>
              部门
            </div>
          </template>
          <div class="user-infom" v-if="userInfo.role === 1">
            总经办
          </div>
          <div class="user-infom" v-else-if="userInfo.role === 2">
            测绘部外业
          </div>
          <div class="user-infom" v-else-if="userInfo.role === 3">
            测绘部内业
          </div>
          <div class="user-infom" v-else-if="userInfo.role === 4">
            技术部
          </div>
          <div class="user-infom" v-else-if="userInfo.role === 5">
            研发部
          </div>
          <div class="user-infom" v-else-if="userInfo.role === 6">
            行政部
          </div>
          <div class="user-infom" v-else-if="userInfo.role === 7">
            设计部
          </div>
        </el-descriptions-item>
        <el-descriptions-item
            label-align="center"
            align="center"
            width="7vw"
            style="height: 5vh"
        >
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Iphone />
              </el-icon>
              电话
            </div>
          </template>
          {{userInfo.userTel}}
        </el-descriptions-item>
        <el-descriptions-item
            label-align="center"
            align="center"
            width="7vw"
            style="font-size: 1.8vh;"
        >
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Location />
              </el-icon>
              住址
            </div>
          </template>
          {{userInfo.userPlace}}
        </el-descriptions-item>
        <el-descriptions-item
            label-align="center"
            align="center"
            width="7vw"
            style="height: 5vh"
        >
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Stamp />
              </el-icon>
              权限
            </div>
          </template>
          <el-tag size="small">{{userInfo.userQX}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item
            label-align="center"
            align="center"
            width="7vw"
            style="height: 5vh"
        >
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Calendar />
              </el-icon>
              注册时间
            </div>
          </template>
          {{userInfo.userRetime}}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
    <el-button
        type="primary"
        @click="showEditDialog"
        style="position: absolute;top: 10vh;left: 80vw;"
    >
      修改密码
    </el-button>

    <el-button
        type="warning"
        @click="logout"
        style="position: absolute;top: 10vh;left: 85vw;"
    >
      退出登录
    </el-button>

  <!--修改信息dialog-->
  <EditInfoDialog
      ref="editDialogRef"
      @refresh = 'getUserInfo'
  />
</template>

<script setup>
import {reactive, ref, computed, onMounted, toRaw} from "vue";
import {ElDescriptions, ElDescriptionsItem, ElIcon, ElButton, ElTag, ElMessage} from "element-plus"
import {User, Iphone, Location, Calendar, Stamp} from "@element-plus/icons-vue"
import EditInfoDialog from "@/components/User/EditInfoDialog.vue";
import {getuserinfo, redis} from "@/api/index.js"
import router from "@/router"
import emitter from "@/lib/eventBus.js"

let userInfo = reactive({
  userName : '',
  userQX : '',
  userRetime : '',
  userTel:'',
  userPlace:'',
  role:'',
})
const size = ref('')
// editDialogRef
const editDialogRef = ref()

onMounted(()=>{
  setTimeout( ()=>{
    //用户信息获取
    getUserInfo()

  },100)

  emitter.emit('home_menu','user')
})

const getUserInfo = async ()=>{
  let i = JSON.parse(localStorage.getItem('syhyDocManSys'))
  try {
    const {data : res} = await getuserinfo({userId:i.id})
    if(res){
      userInfo.userName = res.data.username
      userInfo.userQX = i.root === 2 ? '普通用户': '管理员'
      userInfo.userRetime = res.data.userRetime.substring(0,10)
      userInfo.userTel= res.data.tel === null ? '-' : res.data.tel
      userInfo.userPlace= res.data.address === null ? '-' : res.data.address
      userInfo.role= res.data.role
    }
  } catch (error){
    console.log(error)
  }
}
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
// 展示修改对话框
const showEditDialog = ()=>{
  editDialogRef.value.showEditIndoDialog(userInfo)
}

const logout = () => {
  const result = confirm("确认退出？"); // 显示一个包含指定文本的确认对话框
  if (result) {
    const info = localStorage.getItem('syhyDocManSys')
    if(info){
      localStorage.removeItem('syhyDocManSys')
      location.reload();
    } else {
      router.push('/login')
      return ElMessage({
        message:'身份过期，请重新登陆',
        type:'error'
      })
    }
  } else {
    console.log("用户点击了取消按钮或者关闭了对话框");
  }
}
</script>

<style scoped lang="less">
.info-box{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 11%;
  left: 10%;
  height: 100%;
  width: 100%;
  .info-title{
    width: 20%;
    height: 10%;
    color: black;
    font-size: 3vh;
    letter-spacing: 5px;
  }
  .info-body{
    margin-left: 10vh;
    height: 43%;
    width: 53%;
    padding: 5vh 1vw;
    background-color: white;
    border-radius: 1.5vh;
    box-shadow: 0 0 10px rgba(0,0,0,.4);
  }
}
/deep/.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
  padding: 2vh 11px;
  font-size: 1.7vh;
  box-sizing: border-box !important;
}
</style>